<template>
  <Dialog title="收款" :loading="loading" :visible="visible" button-text="确认" @close="handleClose" @confirm="handleConfirm">
    <!-- 待收款详情 -->
    <el-row flex>
      <el-col>
        <span />
        <p>顾客</p>
      </el-col>
      <el-col :span="7">
        {{ datas.customerName }} {{ datas.customerPhone }}
      </el-col>
      <el-col :span="4">
        会员等级：金卡
      </el-col>
    </el-row>
    <el-row v-if="datas.orderList" flex>
      <el-col>
        <span />
        <p>商品</p>
      </el-col>
      <ul v-for="(item,i) in datas.orderList" :key="i">
        <li>
          <el-col :span="6">
            <span>项目</span> {{ item.customerName }}
          </el-col>
          <el-col :span="2" :offset="16">
            X <span>{{ item.contentCount }}</span>
          </el-col>
        </li>
        <li>
          <el-col :span="5">
            规格：{{ item.specl }}
          </el-col>
          <el-col :span="19">
            单位：{{ item.unit }}
          </el-col>
        </li>
        <li>
          <el-col :span="6">
            单价：{{ item.price }}
          </el-col>
          <el-col :span="3" :offset="15">
            ￥{{ item.price*item.contentCount }}
          </el-col>
        </li>
      </ul>
    </el-row>
    <el-row v-if="!datas.orderList" flex>
      <el-col>
        <span />
        <p>药品</p>
      </el-col>
      <el-table :data="prescriptionListDetailsDtoList" style="width: 100%">
        <el-table-column prop="medicinesName" label="名称" />
        <el-table-column prop="medicinesSpec" label="规格" />
        <el-table-column prop="medicinesUnit" label="单位" />
        <el-table-column prop="usageMethod" label="用法" />
        <el-table-column prop="frequency" label="频率" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="discount" label="折扣(%)" />
      </el-table>
      <el-col>
        合计：￥{{ medicinesMoney }}
      </el-col>
    </el-row>
    <div class="flex">
      <el-row flex>
        <el-col :span="3">
          收款类型
        </el-col>
        <el-col :span="3" :offset="18">
          {{ datas.paymentType }}
        </el-col>
      </el-row>
      <el-row class="flex">
        <el-col :span="3">
          商品总额
        </el-col>
        <el-col :span="3" :offset="18">
          ￥{{ datas.orderAmount }}
        </el-col>
      </el-row>
      <!-- <el-row class="flex">
        <el-col :span="3">
          余额
        </el-col>
        <el-col :span="3" :offset="18">
          -￥1.000
        </el-col>
      </el-row> -->
      <!-- <el-row class="flex">
        <el-col :span="3">
          优惠券
        </el-col>
        <el-col :span="3" :offset="18">
          -￥500
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="5" :offset="19">
          应收款：<span class="span">￥{{ Number(datas.orderAmount) }}</span>
        </el-col>
      </el-row>
    </div>
    <el-row flex class="el-col-24">
      <el-col :span="3">
        <span />
        <p>收款</p>
      </el-col>
      <el-col :span="3" :offset="18">
        <el-button plain @click="addPay">+ 支付方式</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="payType" label="支付方式">
        <template slot-scope="{ row }">
          <DictionarySelector placeholder="不限就诊类型" :value.sync="row.payType" code="swan_financial_zffs" />
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="金额(元)">
        <template slot-scope="{ row }">
          <el-input v-model="row.payAmount" v-inputLimit />
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="{ $index }">
          <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete($index)">
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="5" :offset="19">
        实收款：<span class="span">￥{{ actualAmount }}</span>
      </el-col>
    </el-row>
    <el-input v-model="datas.remark" placeholder="备注" class="remarks" />
    <el-row v-if="datas.logList" flex class="el-col-24">
      <el-col :span="3">
        <span />
        <p>已收款</p>
      </el-col>
    </el-row>
    <el-table v-if="datas.logList" :data="datas.logList" style="width: 100%">
      <el-table-column prop="payType" label="支付方式" align="center">
        <template slot-scope="{ row }">
          <span>{{ dictFormatter('swan_financial_zffs', row.payType) }}</span>
          <!-- <DictionarySelector :value.sync="row.payType" code="swan_financial_zffs" /> -->
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="金额(元)" align="center" />
    </el-table>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
import { DictionarySelector } from "@rabbit.do/rabbit";
import { mapMutations } from 'vuex';
export default {
  // name: 'Dialog',
  components: {
    Dialog,
    DictionarySelector,
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    types: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      medicinesMoney: 0,
      receivables: 0,
      prescriptionListDetailsDtoList: [],
      tableData: [{ payType: '', payAmount: '' }],
      datas: {},
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.currentUserInfo;
    },
    actualAmount() {
      let actualAmount = 0;
      this.tableData.forEach(item => {
        actualAmount += Number(item.payAmount || 0);
      });
      return actualAmount;
    },
  },
  watch: {
    currentRow: {
      handler(val) {
        if (!val) return;
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    ...mapMutations({
      addReceivablesMutations1: 'billing/ADD_RECEIVABLES_MUTATIONS1',
    }),
    handleClose() {
      this.$emit('update:visible', false);
    },
    getList() {
      let url = '';
      this.$api['financialCenter/checkstand/paymentDetail']({ id: this.currentRow.id }).then(res => {
        if (res.code !== 200) return;
        this.datas = res.data;
        this.tableData = [];
        this.tableData = [{ payType: '', payAmount: '' }];
        if (this.datas.orderList) {
          console.log("1");
          this.addReceivablesMutations1(this.datas.orderList);
        }
      }).finally(() => (this.loading = false));
      if (this.currentRow.paymentType === '处方') {
        url = 'financialCenter/checkstand/prescriptionlist';
        this.$api[url]({ id: this.currentRow.orderId }).then(res => {
          if (res.code !== 200) return;
          this.prescriptionListDetailsDtoList = res.data.prescriptionListDetailsDtoList;
          this.medicinesMoney = 0;
          this.prescriptionListDetailsDtoList.forEach(item => {
            this.medicinesMoney += Number(item.price) * Number(item.quantity);
          });
        }).finally(() => (this.loading = false));
      }
    },
    handleConfirm() {
      let bool = true;
      bool = !this.tableData.some(item => (item.payAmount === '' || item.payType === ''));
      if (!bool) return this.msgError("支付方式或者金额不能为空");
      this.loading = true;
      if (this.currentRow) {
        this.tableData.forEach(item => {
          item.paymentId = this.currentRow.id;
          item.payee = this.userInfo.name;
        });
        this.currentRow.paymentType === '处方' ? this.$set(this.datas, 'logList', this.prescriptionListDetailsDtoList) : this.$set(this.datas, 'logList', this.tableData);
        this.$api[`financialCenter/checkstand/editPayment`](this.datas).then(res => {
          if (res.code !== 200) return;
          this.$emit('success');
          this.msgSuccess('收款成功');
          this.handleClose();
        }).finally(() => (this.loading = false));
      }
    },
    addPay() { // 新增支付方式
      this.tableData.push({ payType: '', payMoney: '' });
    },
    handleDelete(i) { // 删除支付方式
      if (this.tableData.length > 1) return this.$delete(this.tableData, i);
      this.msgError('至少选择一种支付方式');
    },
  },
};
</script>
<style lang="scss" scoped>
li,
.flex .el-row {
  line-height: 30px;
}
.el-col-24,
.el-col-24 {
  border-bottom: 1px solid #999;
  display: flex;
  .el-col-3 {
    display: flex;
  }
  p {
    margin: 0 !important;
  }
  span {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: rgb(0, 153, 255);
    margin-right: 4px;
  }
}
.el-col-7 {
  margin: 10px 0 15px 0;
}
.el-col-4 {
  margin: 10px 0 15px 54%;
}
.el-col-offset-19 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.span {
  color: #ff6600;
}
.remarks {
  margin-bottom: 20px;
}
</style>
